import Base from "../base.js";
import movieService from "../../service/movieService.js";

export default class extends Base {

  constructor(props) {
    super(props);
    this.movie = {};
  }

  render() {
    const template = `
    <form class="layui-form" action="" style="width:330px">
      <div class="layui-form-item">
        <label class="layui-form-label">电影名</label>
        <div class="layui-input-block">
          <input type="text" name="cname" required  lay-verify="required" placeholder="请输入电影名" autocomplete="off" class="layui-input" value="">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">英文名</label>
        <div class="layui-input-block">
          <input type="text" name="ename" required  lay-verify="required" placeholder="请输入英文名" autocomplete="off" class="layui-input" value="">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
          <select name="type" lay-verify="required" class="type">
            <option value="动作">动作</option>
            <option value="爱情">爱情</option>
            <option value="悬疑">悬疑</option>
            <option value="科幻">科幻</option>
            <option value="恐怖">恐怖</option>
            <option value="喜剧">喜剧</option>
            <option value="文艺">文艺</option>
            <option value="剧情">剧情</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">首映地址</label>
        <div class="layui-input-block">
          <select name="area" lay-verify="required" class="area">
          <option value="美国">美国</option>
          <option value="欧洲">欧洲</option>
          <option value="中国大陆">中国大陆</option>
          <option value="日本">日本</option>
          <option value="韩国">韩国</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">电影状态</label>
        <div class="layui-input-block">
          <input type="radio" name="status" value="0" title="热映" checked>
          <input type="radio" name="status" value="1" title="经典">
          <input type="radio" name="status" value="2" title="即将">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">上映时间</label>
        <div class="layui-input-block">
          <input type="text" name="upDate" class="layui-input" id="upDate" placeholder="yyyy-MM-dd" value="">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">评分</label>
        <div class="layui-input-block">
          <input type="text" name="score" required  lay-verify="required" placeholder="请输入评分" autocomplete="off" class="layui-input" value="">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">想看</label>
        <div class="layui-input-block">
          <input type="text" name="number" required  lay-verify="required" placeholder="请输入想看人数" autocomplete="off" class="layui-input" value="">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">票房</label>
        <div class="layui-input-block">
          <input type="text" name="count" required  lay-verify="required" placeholder="请输入票房" autocomplete="off" class="layui-input" value="">
        </div>
      </div>
      <div class="layui-form-item director" style="width:430px">
        <label class="layui-form-label">导演</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="director" required  lay-verify="required" placeholder="请输入导演" autocomplete="off" class="layui-input" value="">
        </div>
        <span style="line-height: 38px;color: #a6a6a6;">多导演用,隔开</span>
      </div>
      <div class="layui-form-item actor" style="width:430px">
        <label class="layui-form-label">演员</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="actor" required  lay-verify="required" placeholder="请输入演员" autocomplete="off" class="layui-input" value="">
        </div>
        <span style="line-height: 38px;color: #a6a6a6;">多演员用,隔开</span>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">剧情简介</label>
        <div class="layui-input-block">
          <textarea name="intro" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">剧照</label>
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-disabled" id="upload" lay-submit lay-filter="upload">
          <i class="layui-icon">&#xe67c;</i>图片上传
        </button>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn save" lay-submit lay-filter="save">保存</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    <form>
        `
    this.$el.html(template);
    
  }

  handle(){
    const that = this;
    this.form.on('submit(save)',function (data) {
      // console.log(data.field.director);
      that.create(data.field);
      return false;
    });
    this.form.on('submit(upload)', function (data) {
      if (that.movie._id) {
        that.photoupload(that.movie);
      }
      return false;
    });
  }

  photoupload(data){
    movieService.setMovie(this.movie);
    location.hash = "#/info/movieImg";
  }

  async create(data){
    data.director = JSON.stringify(data.director.split(","));
    data.actor =  JSON.stringify(data.actor.split(","));
    const result = await movieService.create(data);
    if (result._id) {
      this.movie = result;
      this.movie.poster = [];
      $("#upload").removeClass("layui-btn-disabled");
    }
  }

  layui() {
    this.element.render();
    this.form.render();
    this.laydate.render({
      elem: '#upDate'
    });
  }
  
}